<template>
	<view >
		<IndexHead :config='pageConfig'></IndexHead>
		<!-- <ShouyeOrder :pageType='4'/> -->
		<!-- <view :style="{height:statusBarHeight}" class="uni-status-bar"></view> -->
		<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
		<view class="crew" style="margin-top: 300upx;">
		<!-- #endif -->
		<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
		<view class="crew">
		<!-- #endif -->
		<!-- <view class="crew"> -->
			<view class="crew-list" >
				<view class="crew-item" v-for="(item,index) in crewData" :key='index' @click="toDetail">
					<view class="tip">跟团游</view>
					<image :src="item.img"></image>
					<view class="name">
						<text>
							{{item.name}}
						</text>
					</view>
					<text class="fen">{{item.fen}}分</text>
					<text class="price">￥{{item.price}} <text class="qi">起</text></text>
				</view>
			</view>
		</view>
		<view style="height: 19vw;"></view>
		<FootMenu />
	</view>
</template>

<script>
	import FootMenu from '@/components/footMenu.vue'
	import ShouyeOrder from '@/components/shoyeOrder.vue'
	import HotelQuery from '@/components/hotelQuery.vue'
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				pageConfig:{
					common:{
						hasSearch:true, //显示整版搜索框
						hasTitle:true, //显示页面title
						hasMenu:true,
						headHeight:220,
						pageId:'tuanyou',
					},
					left:{
						// img:'/static/pos-home.png' , //左侧图标
						// text:'沈阳市', //左侧文字
					},
					mid:{
						title:'团游' ,//页面title
						hasSearchMid:false //显示中间搜索框
					},
				},
				crewData:[
					{
						name:'沈阳+长白山2日1晚跟团游+沈阳双气',
						img:'/static/banner.png',
						price:'198',
						fen:'4.2',
					},
					{
						name:'沈阳+长白山2日1晚跟团游+沈阳双气',
						img:'/static/banner.png',
						price:'198',
						fen:'4.2',
					},
					{
						name:'沈阳+长白山2日1晚跟团游+沈阳双气',
						img:'/static/banner.png',
						price:'198',
						fen:'4.2',
					},
					{
						name:'沈阳+长白山2日1晚跟团游+沈阳双气',
						img:'/static/banner.png',
						price:'198',
						fen:'4.2',
					},
					{
						name:'沈阳+长白山2日1晚跟团游+沈阳双气',
						img:'/static/banner.png',
						price:'198',
						fen:'4.2',
					},
					{
						name:'沈阳+长白山2日1晚跟团游+沈阳双气',
						img:'/static/banner.png',
						price:'198',
						fen:'4.2',
					}
				]
				
			}
		},
		components:{
			ShouyeOrder,
			FootMenu,
			HotelQuery
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url:'crewDetail'
				})
			}
		},
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.crew{
		/* background: #F6F6F6; */
		width: 750upx;
		margin-top: 200upx;
		padding-bottom: 30upx;
		height: auto;
		display: table;
	}
	.crew-list{
		width: 704upx;
		margin-left: auto;
		margin-right: auto;
	}
	.crew-item{
		width: 340upx;
		height: 475upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-top: 20upx;
		position: relative;
	}
	.crew-item:nth-child(odd){
		float: left;
	}
	.crew-item:nth-child(even){
		float: right;
	}
	.crew-item image{
		width: 340upx;
		height: 336upx;
		border-radius: 20upx 20upx 0 0 ;
	}
	.crew-item .tip{
		position: absolute;
		width: 80upx;
		height: 36upx;
		color: #FFFFFF;
		font-size: 18upx;
		text-align: center;
		line-height: 36upx;
		min-width: 50px;
		border-radius: 20upx 0 20upx 0;
		background: rgba(0,0,0,0.5);
		z-index: 5;
	}
	.name{
		width: 285upx;
		margin-left: 21upx;
		margin-right: 36upx;
		height:70upx;
		
	}
	.name text{
		width: 285upx;
		font-size: 26upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.price{
		font-size: 34upx;
		margin-left: 21upx;
		color: #DD540A;
		margin-right: 36upx;
		float: right;
	}
	.fen{
		font-size: 26upx;
		margin-left: 21upx;
		color: #555555;
	}
	.qi{
		font-size: 26upx;
		color: #555555;
	}
</style>
